<script setup lang="ts">
// 竞争-竞争品牌-品牌客群趋势

import {message} from "ant-design-vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import SycmBrandCustomerTrendsChart
  from "~/contentScripts/views/sycm/brand_monitor/SycmBrandCustomerTrends/SycmBrandCustomerTrendsChart.vue";
import {SycmBrandLists, SycmBrandMonitor} from "~/contentScripts/views/sycm/brand_monitor/SycmBrandMonitor";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import {brandCustomerTrend} from "~/utils/interception/sycm/brandCustomerInterception";
import RequestInterception from "~/utils/RequestInterception";
import {SycmTableUtils} from "~/utils/sycm/SycmTableUtils";

const showZs = ref(false);
const loginVisible = ref<boolean>(false);
const visible = ref<boolean>(false);
const brandLists = ref<SycmBrandLists>();
const loading = ref(false);
const req: RequestInterception = getCurrentInstance()?.proxy?.$req;
const columns = ref<any[]>([]);
const dataSource = ref<any[]>([]);
const dates = ref<any[]>([]);
const calcColumns = () => {
  columns.value = [
    {
      title: "品牌名称",
      dataIndex: "brand.title",
      width: 200,
      sorter: (a: any, b: any) => a.brand.title.localeCompare(b.brand.title),
      dataType: 'brand',
      dataField: {
        brand_name: 'brand.title',
        brand_logo: 'brand.logo',
        // brand_url:'brand.brand_url',
      }
    },
    {
      title: "类别",
      dataIndex: "type",
      width: 60,
      sorter: (a: any, b: any) => a.type.localeCompare(b.type),
      dataType: "custom",
      slot: "type"
    },
    {
      title: "日期",
      dataIndex: "date",
      width: 100,
      sorter: (a: any, b: any) => a.date.localeCompare(b.date),
    },
    {
      dataIndex: 'tradeIndex',
      title: showZs.value ? '交易指数' : '交易金额',
      sorter: (a: any, b: any) => a.tradeIndex - b.tradeIndex,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (record.tradeIndex === null) {
          return '-';
        }
        if (showZs.value) {
          return record.tradeIndex;
        }
        return SycmTableUtils.tranNumber(showZs.value, record.tradeIndex, 0, false);
      }
    },
    {
      dataIndex: 'uv',
      title: '访客数',
      sorter: (a: any, b: any) => a.uvIndex - b.uvIndex,
      align: 'right',
    },
    {
      dataIndex: 'payByrCntIndex',
      title: '支付买家数',
      sorter: (a: any, b: any) => a.payByrCntIndex - b.payByrCntIndex,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (record.payByrCntIndex === null) {
          return '-';
        }
        if (showZs.value) {
          return record.payByrCntIndex;
        }
        return SycmTableUtils.tranNumber(showZs.value, record.payByrCntIndex, 0, false);
      }
    },
    {
      dataIndex: 'payRateIndex',
      title: showZs.value ? '支付转化指数' : '支付转化率',
      sorter: (a: any, b: any) => a.payRateIndex - b.payRateIndex,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (typeof record.payRateIndex == 'undefined' || record.payRateIndex === null) {
          return '-';
        }
        if (showZs.value) {
          return record.payRateIndex;
        }
        return SycmTableUtils.tranRatio(showZs.value, record.payRateIndex);
      }
    },
    {
      dataIndex: 'customerPrice',
      title: '客单价',
      sorter: (a: any, b: any) => a.customerPrice - b.customerPrice,
      align: 'right',
    },
    {
      dataIndex: 'uvValue',
      title: 'UV价值',
      sorter: (a: any, b: any) => a.uvValue - b.uvValue,
      align: 'right',
    },
  ];
}

const calcDataSource = () => {
  const d: any = [];
  if (brandLists.value) {
    // 从品牌1和品牌2 品牌3 中去除一个非空的
    dates.value.forEach((date, index) => {
      if (brandLists.value?.brand1 && brandLists.value?.brand1.CustomerTrends) {
        const curr: any = brandLists.value.brand1.CustomerTrends;
        const obj: any = {
          key: index,
          brand: {
            title: brandLists.value?.brand1.name,
            logo: brandLists.value?.brand1.picUrl,
          },
          type: '品牌1',
          date: dates.value[index],
          tradeIndex: curr.tradeIndex[index],
          uv: curr.uv[index],
          payByrCntIndex: curr.payByrCntIndex[index],
          payRateIndex: curr.payRateIndex[index],
          customerPrice: curr.customerPrice[index],
          uvValue: curr.uvValue[index],
        };
        d.push(obj);
      }
      if (brandLists.value?.brand2 && brandLists.value?.brand2.CustomerTrends) {
        const curr: any = brandLists.value.brand2.CustomerTrends;
        const obj: any = {
          key: index,
          brand: {
            title: brandLists.value?.brand2.name,
            logo: brandLists.value?.brand2.picUrl,
          },
          type: '品牌2',
          date: dates.value[index],
          tradeIndex: curr.tradeIndex[index],
          uv: curr.uv[index],
          payByrCntIndex: curr.payByrCntIndex[index],
          payRateIndex: curr.payRateIndex[index],
          customerPrice: curr.customerPrice[index],
          uvValue: curr.uvValue[index],
        };
        d.push(obj);
      }
      if (brandLists.value?.brand3 && brandLists.value?.brand3.CustomerTrends) {
        const curr: any = brandLists.value.brand3.CustomerTrends;
        const obj: any = {
          key: index,
          brand: {
            title: brandLists.value?.brand3.name,
            logo: brandLists.value?.brand3.picUrl,
          },
          type: '品牌3',
          date: dates.value[index],
          tradeIndex: curr.tradeIndex[index],
          uv: curr.uv[index],
          payByrCntIndex: curr.payByrCntIndex[index],
          payRateIndex: curr.payRateIndex[index],
          customerPrice: curr.customerPrice[index],
          uvValue: curr.uvValue[index],
        };
        d.push(obj);
      }
    });
    dataSource.value = d;
  }
}
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    },
  }, __option)) {
    loading.value = true;
    brandLists.value = await SycmBrandMonitor.assignBrandListCustomerTrend(await SycmBrandMonitor.getBrandsByCustomer(), req);
    console.log(brandLists.value);
    dates.value = await SycmBrandMonitor.getDates();
    // console.log(dates.value);
    calcColumns();
    calcDataSource();
    visible.value = true;
    loading.value = false;
  }
};
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0"/>
      <a-button :loading="loading" type="primary" size="small" @click="handle">一键转化</a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal v-model:visible="visible" title="竞争-竞争品牌-品牌客群-客群趋势" width="95%" style="top: 20px;">
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
        <a-checkbox style="margin-left: 10px;" v-model:checked="showZs">显示指数</a-checkbox>
      </template>
      <div style="min-height: 750px;max-height: calc(100vh - 110px);overflow-y: auto;">
        <SycmBrandCustomerTrendsChart :brand-lists="brandLists" :show-zs="showZs" :dates="dates"/>
        <a-divider/>
        <base-table :data-source="dataSource" :columns="columns" table-name="竞争-竞争品牌-品牌客群-客群趋势" :scroll="{
        y:400
      }"
        >
          <template #type="record">
            <a-tag color="green" v-if="record.type==='品牌1'">
              品牌1
            </a-tag>
            <a-tag color="purple" v-else-if="record.type==='品牌2'">
              品牌2
            </a-tag>
            <a-tag color="orange" v-else-if="record.type==='品牌3'">
              品牌3
            </a-tag>
          </template>
        </base-table>
      </div>
    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
